<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="发票信息"></van-nav-bar>
    <!-- #endif -->
    <view class="apply-invoice" scroll-y="true" :style="styleHeight">
      <view class="contain">
        <view class="contain-title">
          <view class="title">
            发票类型
            <text class="reqiure">*</text>
          </view>
          <view class="button-other">
            <view
              class="border-content"
              :class="data.type ? 'after' : 'before'"
              id="2"
              @tap="checkType2">
              <text :class="data.type ? 'after' : 'before'">增值税普通发票</text>
              <view class="checked" v-if="data.type">
                <text class="iconfont icon-select"></text>
              </view>
            </view>
            <view
              class="border-content"
              :class="data.type ? 'before' : 'after'"
              id="1"
              @tap="checkType1"
              v-if="data.canTicket">
              <text :class="data.type ? 'before' : 'after'">增值税专用发票</text>
              <view class="checked" v-if="!data.type">
                <text class="iconfont icon-select"></text>
              </view>
            </view>
          </view>

          <view class="title">
            发票主体
            <text class="reqiure">*</text>
          </view>
          <view class="button-other">
            <view
              class="border-content"
              :class="data.type2 ? 'after' : 'before'"
              id="2"
              @tap="checkType4"
              v-if="data.ticketType == 0">
              <text :class="data.type2 ? 'after' : 'before'">个人/非企业单位</text>
              <view class="checked" v-if="data.type2">
                <text class="iconfont icon-select"></text>
              </view>
            </view>
            <view
              class="border-content"
              :class="data.type2 ? 'before' : 'after'"
              id="1"
              @tap="checkType3">
              <text :class="data.type2 ? 'before' : 'after'">企业单位</text>
              <view class="checked" v-if="!data.type2">
                <text class="iconfont icon-select"></text>
              </view>
            </view>
          </view>
        </view>
        <view class="contain-bill" :style="styleBottom1">
          <view class="contain-detail-div">
            <view class="title">
              发票抬头
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <view>
                <view class="input-group">
                  <input
                    placeholder="请输入发票抬头"
                    placeholder-style="color:#B5B5B5;"
                    adjust-position="true"
                    maxlength="64"
                    @input="search"
                    v-model="data.companyName"
                    class="input_style" />
                  <view class="list_ul" v-if="data.isShow">
                    <view
                      class="list_li"
                      v-for="(item, index) in data.list"
                      :id="item.companyName"
                      :key="index"
                      @tap="select(item)">
                      {{ item.companyName }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="contain-detail-div" v-if="data.ticketBody === 1">
            <view class="title">
              纳税人识别号
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入纳税人识别号"
                placeholder-style="color:#B5B5B5;"
                maxlength="20"
                v-model="data.taxNumber" />
            </view>
          </view>
          <view class="contain-detail-div">
            <view class="title">
              电费
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入电费"
                placeholder-style="color:#B5B5B5;"
                maxlength="34"
                disabled
                v-model="data.powerAmount" />
            </view>
          </view>
          <view class="contain-detail-div">
            <view class="title">
              服务费
              <text class="reqiure">*</text>
            </view>

            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入服务费"
                disabled
                maxlength="34"
                placeholder-style="color:#B5B5B5;"
                v-model="data.serviceAmount" />
            </view>
          </view>
          <view class="contain-detail-div">
            <view class="title">
              超时占用费
              <text class="reqiure">*</text>
            </view>

            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入超时占用费"
                disabled
                maxlength="34"
                placeholder-style="color:#B5B5B5;"
                v-model="data.occupyAmount" />
            </view>
          </view>
          <view class="contain-detail-div">
            <view class="title">
              发送邮箱
              <!-- <text class="reqiure">*</text> -->
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入发送邮箱"
                placeholder-style="color:#B5B5B5;"
                maxlength="64"
                v-model="data.email" />
            </view>
          </view>
          <view class="contain-detail-div" v-if="data.ticketBody === 1">
            <view class="title">
              开户行名称
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入开户行名称"
                placeholder-style="color:#B5B5B5;"
                maxlength="64"
                v-model="data.bankName" />
            </view>
          </view>
          <view class="contain-detail-div" v-if="data.ticketBody === 1">
            <view class="title">
              开户行账号
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入开户行账号"
                placeholder-style="color:#B5B5B5;"
                type="number"
                maxlength="20"
                v-model="data.bankAccount" />
            </view>
          </view>
          <view class="contain-detail-div" v-if="data.ticketBody === 1">
            <view class="title">
              注册地址
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入注册地址"
                placeholder-style="color:#B5B5B5;"
                maxlength="255"
                v-model="data.address" />
            </view>
          </view>
          <view class="contain-detail-div" v-if="data.ticketBody === 1">
            <view class="title">
              注册电话
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入注册电话"
                placeholder-style="color:#B5B5B5;"
                maxlength="11"
                type="number"
                v-model="data.telephone" />
            </view>
          </view>
          <view class="contain-detail-div">
            <view class="title">
              收票人姓名
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入收票人姓名"
                placeholder-style="color:#B5B5B5;"
                maxlength="64"
                v-model="data.recipientName" />
            </view>
          </view>
          <view class="contain-detail-div">
            <view class="title">
              收票人手机
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入收票人手机"
                placeholder-style="color:#B5B5B5;"
                maxlength="11"
                type="number"
                v-model="data.recipientTelephone" />
            </view>
          </view>
          <view class="contain-detail-div">
            <view class="title">
              收票人地址
              <text class="reqiure">*</text>
            </view>
            <view class="bill-detail2">
              <input
                class="input_style"
                placeholder="请输入收票人地址"
                placeholder-style="color:#B5B5B5;"
                maxlength="255"
                v-model="data.recipientAddress" />
            </view>
          </view>
        </view>
        <!-- 底部按钮 -->
        <view class="bottom-wrap" :style="styleBottom">
          <button class="bnt-wrap bnt-pay" @tap="nextCheck">下一步</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getSystemInfo, setToastInstance, systemInfo } from '@mixins/info';
import { queryTicket, queryPersonal, queryIsSupportInvoice } from '@/service/apis/mine';
import { getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const $toast: any = inject('$Toast');
const styleBottom = ref(`height: calc(124rpx + ${getSystemInfo().safeBottom}px)`);
const styleBottom1 = `padding-bottom: calc(124rpx + ${getSystemInfo().safeBottom}px)`;
let styleHeight = ref(`height: calc(99vh - (${getSystemInfo().safeBottom}px))`);
// #ifdef H5
styleHeight.value = `height: calc(99vh - ${getSystemInfo().safeBottom}px - ${
  getSystemInfo().navHeight
}px)`;
// #endif

let data = reactive({
  type: true,
  type2: false,
  isShow: false,
  list: [] as Array<any>,
  canTicket: false, // true只可普票  false 专票普票都可
  ticketType: 0, // 发票形式 0:增值税普通发票 1:增值税专用发票
  ticketBody: 1, // 0:个人/非企业单位 1:企业单位
  companyName: '', // 发票抬头
  taxNumber: '', // 纳税人识别号
  email: '',
  bankName: '',
  bankAccount: '',
  address: '',
  telephone: '',
  powerAmount: '',
  serviceAmount: '',
  recipientName: '',
  recipientTelephone: '',
  recipientAddress: '',
  orderId: '',
  occupyAmount: '',
});
onLoad((option: any) => {
  console.log('option=====', option);
  data.powerAmount = option.powerMoney;
  data.serviceAmount = option.serviceMoney;
  data.occupyAmount = option.occupyMoney;
  data.orderId = option.orderId;
});
const checkType1 = () => {
  console.log(data.canTicket);
  // if (data.canTicket) {
  //   console.log(1111);
  //   data.type = true;
  //   data.ticketType = 1;
  // } else {
  console.log(2222);
  data.type = false;
  data.ticketType = 1;
  data.ticketBody = 1;
  data.type2 = false;
  // }
};

// 获取用户是否是企业用户和收件信息
queryPersonal({}, { account: { accountId: getItem('userid') } })
  .then((res: any) => {
    if (res) {
      // false 企业 true 非企业
      // data.canTicket = res?.unit;
      data.recipientName = res?.userName;
      data.recipientTelephone = res?.receivingPhone;
      if (res?.receivingAddress && res?.receivingRegion) {
        data.recipientAddress = `${res?.receivingAddress}${res?.receivingRegion}`;
      }
    }
  })
  .catch(() => {});

queryIsSupportInvoice({})
  .then((res: any) => {
    if (res) {
      // 增值税专用发票 0: 表示不支持 仅开启普票（否） 1:表示支持（是）
      data.canTicket = Number(res);
    }
  })
  .catch(() => {});

const checkType2 = () => {
  data.type = true;
  data.ticketType = 0;
};
const checkType3 = () => {
  data.type2 = false;
  data.ticketBody = 1;
};
const checkType4 = () => {
  if (data.type == false) {
    data.type2 = false;
    data.ticketBody = 1;
  } else {
    data.type2 = true;
    data.ticketBody = 0;
  }
};
// 获取
const search = () => {
  if (data.ticketBody === 1) {
    if (data.companyName) {
      queryTicket({
        companyName: data.companyName,
        ticketType: data.ticketType,
      })
        .then((res: any) => {
          if (res && res.dataList) {
            data.list = res.dataList.slice(0, 4);
            if (res.dataList.length > 0) {
              data.isShow = true;
            }
          }
        })
        .catch(() => {});
    } else {
      data.isShow = false;
    }
  }
};
const nextCheck = () => {
  // if (data.ticketType == '') {
  //   $toast('请选择发票类型');
  //   return;
  // }
  // if (data.ticketBody == '') {
  //   $toast('请选择发票主体');
  //   return;
  // }
  if (data.companyName == '') {
    $toast('请输入发票抬头');
    return;
  }
  if (data.ticketBody === 1 && data.taxNumber == '') {
    $toast('请输入纳税人识别号');
    return;
  }
  if (data.ticketBody === 1 && data.bankName == '') {
    $toast('请输入开户行名称');
    return;
  }
  if (data.ticketBody === 1 && data.bankAccount == '') {
    $toast('请输入开户行账号');
    return;
  }
  if (data.ticketBody === 1 && data.address == '') {
    $toast('请输入注册地址');
    return;
  }
  if (data.ticketBody === 1 && data.telephone == '') {
    $toast('请输入注册电话');
    return;
  }
  if (data.powerAmount == '') {
    $toast('请输入电费');
    return;
  }
  const powerReg = /^\d+(\.\d{1,2})?$/;
  if (!powerReg.test(data.powerAmount)) {
    $toast('请输入正确的电费，精确到2位小数');
    return;
  }
  if (data.serviceAmount == '') {
    $toast('请输入服务费');
    return;
  }
  if (!powerReg.test(data.serviceAmount)) {
    $toast('请输入正确的服务费，精确到2位小数');
    return;
  }
  const emailReg = /^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  if (data.email && !emailReg.test(data.email)) {
    $toast('请输入正确的发送邮箱');
    return;
  }
  if (!data.recipientName) {
    $toast('请输入收票人姓名');
    return;
  }
  console.log('data.recipientTelephone====', data.recipientTelephone);

  if (!data.recipientTelephone) {
    $toast('请输入收票人手机');
    return;
  }

  if (!data.recipientAddress) {
    $toast('请输入收票人地址');
    return;
  }
  console.log('data---', data);

  uni.navigateTo({
    url: `/pagesMyCenter/myBilling/applyInvoiceStepTwo?data=` + JSON.stringify(data),
  });
};

const select = (item: any) => {
  console.log(111111);
  data.companyName = item.companyName;
  data.taxNumber = item.taxNumber;
  data.bankName = item.bankName;
  data.bankAccount = item.bankAccount;
  data.address = item.address;
  data.telephone = item.telephone;
  data.isShow = false;
};

// const hanleBlur = () => {
//   console.log(22222222);
//   console.log('wolaila1~~~~~');
//   console.log('wolaila1~~~~~', data);
//   // if (data.taxNumber) {
//   // data.isShow = false;
//   // }
// };
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.apply-invoice {
  // #ifdef H5
  overflow-y: auto;
  // #endif
  .input-group {
    position: relative;
    z-index: 99;
    .list_ul {
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
      z-index: 1;
      background: #fff;
      box-shadow: 1px 1px 2px rgba(82, 90, 102, 0.04), 2px 2px 8px rgba(82, 90, 102, 0.08);
      border-radius: 4px;
      z-index: 9999;
    }
    .list_li {
      line-height: 30px;
      padding: 0 16px;
      font-size: 12px;
      overflow: hidden; /* 移除隐藏 */
      text-overflow: ellipsis; /* 省略号 */
      white-space: nowrap; /* 禁止文字自动换行 */
    }
  }
  .contain {
    .contain-title {
      padding: 16px 16px 0 16px;
      .title {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #242424;
      }
      .reqiure {
        color: #fa3939;
      }
      .button-other {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        margin-bottom: 20px;
        .border-content {
          width: 163px;
          // height: 38px;
          font-size: 14px;
          line-height: 22px;
          text-align: center;
          padding: 8px 0;
          border: 1px solid;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          position: relative;
          .checked {
            width: 20px;
            height: 20px;
            background-color: $uni-color-primary;
            border-radius: 80px 0px 20px 0px;
            position: absolute;
            right: -1px;
            bottom: 0;
            display: flex;
            justify-content: space-around;
            .icon-select {
              color: #fff;
              font-size: 8px;
            }
          }
        }
        .before {
          color: #242424;
          border-color: #d5d5d5;
          // border: 1px solid #d5d5d5;
          border-radius: 8px;
        }
        .after {
          // width: 163px;
          // height: 38px;
          // font-size: 14px;
          // line-height: 22px;
          // text-align: center;
          color: $uni-color-primary;
          border-color: $uni-color-primary;
          // padding: 8px 0;
          // border: 1px solid $uni-color-primary;
          border-radius: 8px;
        }
      }
    }
    .contain-bill {
      padding: 0 16px;
      .contain-detail-div {
        .title {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #242424;
          .reqiure {
            color: #fa3939;
          }
        }

        .bill-detail2 {
          margin-top: 8px;
          margin-bottom: 20px;
          .input_style {
            font-size: 14px;
            border: 1px solid #d5d5d5;
            border-radius: 8px;
            padding: 13px 16px;
            z-index: 99;
          }
        }
      }
    }
    .bottom-wrap {
      position: fixed;
      width: 100vw;
      bottom: 0;
      background-color: #fff;
      z-index: 999;
      .bnt-pay {
        margin: 9px 0 9px 16px;
        width: 343px;
        height: 44px;
        border-radius: 50px;
      }
    }
  }
}
</style>
